<template>
  <div class="sample-list">
    <div class="sample-wrap">
      <div class="bread-wrap">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <i class="iconfont icon-yangbenku"></i> 学生画像</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-row>
        <el-col :span="10">
          <!-- 节点信息上导航 -->
          <div class="stu-info">
            <!-- xap -->
            <h3>个人信息:</h3>
            <!-- SAMPLE -->
            <div v-if="type==='sample'">
              <div class="info-item">
                名字:<span>{{stuInfo.actor_name}}</span>
              </div>
              <div class="info-item">
                生日:<span>{{stuInfo.actor_birthday}}</span>
              </div>
              <div class="info-item">
                学号:<span>{{stuInfo.actor_id}}</span>
              </div>
              <div class="info-item">
                性别:<span>{{stuInfo.actor_sex}}</span>
              </div>
              <div class="info-item">
                专业:<span>{{stuInfo.major}}</span>
              </div>


            </div>
            <div v-else-if="type==='portrait'">
              <div class="info-item">
                名字:<span>{{stuInfo.name}}</span>
              </div>
              <div class="info-item">
                学号:<span>{{stuInfo.actor_id}}</span>
              </div>
              <div class="info-item">
                平均成绩:<span>{{stuInfo.average_score}}</span>
              </div>
            </div>

          </div>
          <div class="predict-info">
            <h3>学习状态预测:</h3>
            <div v-if="type==='sample'">
              <el-row>
                <el-col :span="8">
                  <div class="info-item">
                    <span class="cal-title">KNN</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info-item">
                    <span class="cal-title">RF</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info-item">
                    <span class="cal-title">SVM</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div class="info-item">
                    <span :class="statusInfo.knn_predict_level | themeFormat">{{statusInfo.knn_predict_level}}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info-item">
                    <span :class="statusInfo.rf_predict_level | themeFormat">{{statusInfo.rf_predict_level}}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info-item">
                    <span :class="statusInfo.svm_predict_level | themeFormat">{{statusInfo.svm_predict_level}}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div v-else-if="type==='portrait'">
              <el-row>
                <el-col :span="12">
                  <div class="info-item">
                    <span class="cal-title">DT</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="info-item">
                    <span class="cal-title">RF</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div class="info-item">
                    <span :class="statusInfo.dt_predict_level | themeFormat">{{statusInfo.dt_predict_level}}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="info-item">
                    <span :class="statusInfo.rf_predict_level | themeFormat">{{statusInfo.rf_predict_level}}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="text-wrap-left text-wrap-common">
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{statusInfo.explain_comment_string}}</p>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="stu-box-wrap">
            <div
              class="stu-pic-sample"
              v-if="type=== 'sample'"
              key="sample"
            >
              <div
                class="stu-pic-item"
                v-if="result.age"
              ><span>年龄:{{result.age}}</span></div>
              <div
                class="stu-pic-item"
                v-if="result.cnt"
              > <span>访问数:{{result.cnt}}</span> </div>
              <div
                class="stu-pic-item"
                v-if="result.long"
              > <span>时长:{{result.long}}</span> </div>
              <div
                class="stu-pic-item"
                v-if="result.mean"
              > <span>成绩:{{result.mean}}</span> </div>
            </div>
            <div
              class="stu-pic-xap"
              v-else-if="type==='portrait'"
              key="portrait"
            >
              <div class="stu-pic-item"><span>登陆:{{result.registered}}</span></div>
              <div class="stu-pic-item"> <span>提交:{{result.submitted}}</span> </div>
              <div class="stu-pic-item"> <span>发表:{{result.posted}}</span> </div>
              <div class="stu-pic-item"> <span>观看:{{result.watched}}</span> </div>
            </div>
          </div>
          <div class="text-wrap-right text-wrap-common">
            <h3>干预建议:</h3>
            <template v-for="(item, key) in statusInfo.action_explain">
              <p :key="item">
                <span style="padding-right:10px;">{{key}}:</span>
                <span>{{item}}</span>
              </p>
            </template>

          </div>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: true,
        docLoading: true,
        docVisible: false,
        hiddenFile: '',
        type: '',
        result: {},
        stuInfo: {
          actor_id: ''
        },
        statusInfo: {

        }
      }
    },
    filters: {
      themeFormat(val) {
        const data = {
          '积极': 's-active',
          '良好': 's-normal',
          '危险': 's-danger'
        }
        return data[val]
      }
    },

    created() {
      this.type = this.$store.state.type
      this.dataGet()
    },
    methods: {
      handleClose(done) {
        done()
      },
      dataGet() {
        let id = this.$route.query.id
        let url = ""
        if (this.type === 'sample') {
          url = `/${this.type}/test_data/`

        } else if (this.type === 'portrait') {
          url = `/${this.type}/predict_std/`
        }
        //个人信息
        this.$http.get(`/${this.type}/student_info/`, {
          params: {
            actor_id: id
          }
        }).then(response => {
          this.stuInfo = response.data.results[0]
        })
        this.$http.get(url, {
          params: {
            actor_id: id
          }
        }).then(response => {
          this.result = response.data.results[0]
        })
        this.$http.get(`/portrait/get_std_explain/${this.type}/${id}`).then(response => {
          this.statusInfo = response.data.data
        })
      }
      // listGet() {
      //   this.loading = true
      //   this.$http.get('/docsimilarity/listdir/', {
      //     params: {
      //       path: this.path
      //     }
      //   }).then(response => {
      //     this.listData.data = response.data
      //     console.log(this.listData.data)
      //     this.loading = false
      //   })
      // }
    }
  }

</script>

<style
  lang="scss"
  scoped
>
  .sample-list {
    $tcolor: #a7a7a7;
    $bcolor: #f9f9f9;
    $acolor: #3b89de;
    height: 100%;

    .sample-wrap {
      height: calc(100% - 40px);
      overflow-y: scroll;

      h3 {
        color: #2b5991;
      }

      .text-wrap-common {
        width: 80%;
        padding: 20px;
        color: grey;
      }

      .stu-info {
        padding: 20px;

        .info-item {
          margin-bottom: 10px;
          padding-left: 10px;

          >span {
            padding-left: 20px;
          }
        }
      }

      .predict-info {
        padding: 20px;

        .s-active {
          color: green;
        }

        .s-normal {
          color: #2b5991;
        }

        .s-danger {
          color: red;
        }

        .cal-title {
          font-size: 14px;
          color: #3b89de;
          font-weight: bold;
        }

        .info-item {
          margin-bottom: 10px;
          padding-left: 10px;
          font-size: 16px;
        }
      }

      .stu-box-wrap {
        margin: 20px;
        padding-top: 30px;

        .stu-pic-xap,
        .stu-pic-sample {
          width: 300px;
          height: 300px;
          /* border: 1px dotted black; */
          border-radius: 50%;
          position: relative;
          padding: 20px;
          margin: 30px;
          background: url('https://fuyumoe-static0.oss-cn-shanghai.aliyuncs.com/ismou%2Fimages%2Fstudent.png');
          background-size: cover;

          .stu-pic-item {
            width: 70px;
            height: 70px;
            border: 1px solid #f3f3f3;
            border-radius: 50%;
            background: #f3f3f3;
            line-height: 70px;
            text-align: center;

            &:nth-child(1) {
              position: absolute;
              left: 0;
              top: 30px;
              animation: spin1 20s infinite linear;
            }

            &:nth-child(2) {
              position: absolute;
              right: 0;
              top: 30px;
              animation: spin2 20s infinite linear;
            }

            /* &:nth-child(3) {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(-50%, -50%)
          }

          &:nth-child(4) {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translate(50%, -50%)
          } */

            &:nth-child(3) {
              position: absolute;
              left: 0;
              bottom: 30px;
              transform: translate(0, 0);
              animation: spin3 20s infinite linear;
            }

            &:nth-child(4) {
              position: absolute;
              right: 0;
              bottom: 30px;
              transform: translate(0, 0);
              animation: spin4 20s infinite linear;
            }
          }
        }

        .stu-result {
          padding-left: 50px;
        }

        @keyframes spin1 {
          from {
            transform: translate(120px, 120px) rotate(0turn) translate(120px, 120px) rotate(1turn)
          }

          to {
            transform: translate(120px, 120px) rotate(1turn) translate(120px, 120px) rotate(0turn)
          }
        }

        @keyframes spin2 {
          from {
            transform: translate(-120px, 120px) rotate(0turn) translate(-120px, 120px) rotate(1turn)
          }

          to {
            transform: translate(-120px, 120px) rotate(1turn) translate(-120px, 120px) rotate(0turn)
          }
        }

        @keyframes spin3 {
          from {
            transform: translate(115px, -110px) rotate(0turn) translate(115px, -110px) rotate(1turn)
          }

          to {
            transform: translate(115px, -110px) rotate(1turn) translate(115px, -110px) rotate(0turn)
          }
        }

        @keyframes spin4 {
          from {
            transform: translate(-115px, -110px) rotate(0turn) translate(-115px, -110px) rotate(1turn)
          }

          to {
            transform: translate(-115px, -110px) rotate(1turn) translate(-115px, -110px) rotate(0turn)
          }
        }
      }
    }

  }

</style>
